<template>
    <div class="container">
        <div class="header">
            <h1>留言面板</h1>
            <p>分享你的想法，参与讨论</p>
        </div>

        <!-- 发表留言区 -->
        <el-card class="message-card">
            <template #header>
                <div class="flex justify-between">
                    <span>发表留言</span>
                    <el-tag type="info" size="small">共 {{ messages.length }} 条留言</el-tag>
                </div>
            </template>

            <el-form :model="newMessage" label-width="0" class="mt-4">
                <el-form-item prop="name">
                    <el-input v-model="newMessage.name" placeholder="请输入留言標題" clearable maxlength="20"></el-input>
                </el-form-item>
                <el-form-item prop="content">
                    <el-input v-model="newMessage.content" type="textarea" :rows="4" placeholder="请输入留言内容" resize="none" maxlength="500" show-word-limit></el-input>
                </el-form-item>

                

                <el-form-item>
                    <el-button :loading="submitting" color="#F16C2E" @click="addMessage">
                        <el-icon size="mini" color="#ffffff">
                            <Position />
                        </el-icon>
                        <span>提交留言</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 留言列表区 -->
        <el-card class="message-card">
            <template #header>
                <span>留言列表</span>
            </template>

            <div v-if="messages.length === 0" style="text-align: center; padding: 30px 0">
                <!-- <i class="fa fa-comment-o" style="font-size: 40px; color: #ccc; margin-bottom: 10px"></i> -->
                 <el-icon size="40px" color="#ffffff">
                    <ChatLineRound />
                </el-icon>
                <p style="color: #909399; margin-top: 10px;">暂无留言，快来发表第一条留言吧~</p>
            </div>

            <div v-else class="message-list">
                <div v-for="(message, msgIndex) in messages" :key="message.id" class="message-item">
                    <div class="flex items-center">
                        <el-avatar icon="User" :size="40"></el-avatar>
                        <span style="font-weight: 500; margin-left: 8px">
                            {{ message.name || '匿名用户' }}
                        </span>
                        <span class="time-text">
                            {{ formatTime(message.timestamp) }}
                        </span>
                    </div>

                    <div style="margin: 10px 0 5px 34px; line-height: 1.6">
                        {{ message.content }}
                    </div>

                    <div style="margin-left: 34px">
                        <el-button color="#F16C2E" size="small" class="reply-btn" @click="toggleReply(msgIndex)">
                            <el-icon size="mini" color="#ffffff">
                                <TopLeft />
                            </el-icon>
                            {{ message.showReplyForm ? '取消回复' : '回复' }}
                        </el-button>

                        <span v-if="message.replies.length > 0" class="time-text"> {{ message.replies.length }} 条回复 </span>
                    </div>

                    <!-- 回复输入框 -->
                    <div v-if="message.showReplyForm" class="reply-form" style="margin-left: 34px; margin-top: 10px">
                        <el-form :model="message.newReply" label-width="0">
                            <el-form-item>
                                <el-input v-model="message.newReply.content" type="textarea" :rows="2" placeholder="请输入回复内容" resize="none" maxlength="300" show-word-limit></el-input>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" color="#F16C2E" size="small" @click="addReply(msgIndex)" :loading="message.replyLoading"> 回复 </el-button>
                                <el-button color="#C0C4CC" size="small" style="margin-left: 8px" @click="toggleReply(msgIndex)"> 取消 </el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                    <!-- 回复列表 -->
                    <div v-if="message.replies.length > 0" class="reply-list">
                        <div v-for="(reply, repIndex) in message.replies" :key="reply.id" class="reply-item">
                            <div class="flex items-center">
                                <el-avatar icon="User" :size="40"></el-avatar>
                                <span style="font-size: 13px; margin-left: 5px">
                                    {{ reply.name || '匿名用户' }}
                                </span>
                                <span class="time-text">
                                    {{ formatTime(reply.timestamp) }}
                                </span>
                            </div>
                            <div class="reply-content">
                                {{ reply.content }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElCard, ElInput, ElButton, ElForm, ElFormItem, ElTag, ElAvatar, ElMessage } from 'element-plus'
import { Position } from '@element-plus/icons-vue'
import CourseService from '@/api/course'
// 留言列表数据
const messages = reactive([
    {
        id: 1,
        content: '这个留言面板看起来不错，希望能在这里看到更多有趣的讨论~',
        name: '小明',
        timestamp: Date.now() - 86400000, // 昨天
        replies: [
            {
                id: 101,
                content: '我也觉得挺好用的，期待后续功能更新',
                name: '小红',
                timestamp: Date.now() - 72000000, // 20小时前
            },
        ],
        showReplyForm: false,
        newReply: {
            content: '',
            name: '',
        },
        replyLoading: false,
    },
])

// 新留言对象
const newMessage = reactive({
    content: '',
    name: '',
})

// 提交状态
const submitting = ref(false)

// 添加新留言
const addMessage = () => {
    if (!newMessage.content.trim()) {
        ElMessage.warning('请输入留言内容')
        return
    }

    submitting.value = true
    const params = {
        course_id: 1,
        receiver_id: 24,
        // title: newMessage.name,
        content: newMessage.content,
        parent_id: 8
    }
    CourseService.postMessage(params).then(res => {

    }).finally(() => {
        submitting.value = false
    })

    // setTimeout(() => {
    //     const newId = messages.length > 0 ? Math.max(...messages.map(m => m.id)) + 1 : 1

    //     messages.unshift({
    //         id: newId,
    //         content: newMessage.content,
    //         name: newMessage.name || '',
    //         timestamp: Date.now(),
    //         replies: [],
    //         showReplyForm: false,
    //         newReply: {
    //             content: '',
    //             name: '',
    //         },
    //         replyLoading: false,
    //     })

    //     // 重置表单
    //     newMessage.content = ''
    //     newMessage.name = ''
    //     submitting.value = false
    //     ElMessage.success('留言发布成功')
    // }, 500)
}

// 切换回复表单显示状态
const toggleReply = msgIndex => {
    messages[msgIndex].showReplyForm = !messages[msgIndex].showReplyForm
    // 重置回复内容
    if (messages[msgIndex].showReplyForm) {
        messages[msgIndex].newReply.content = ''
    }
}

// 添加回复
const addReply = msgIndex => {
    const message = messages[msgIndex]
    if (!message.newReply.content.trim()) {
        ElMessage.warning('请输入回复内容')
        return
    }

    message.replyLoading = true
    setTimeout(() => {
        const replyId = message.replies.length > 0 ? Math.max(...message.replies.map(r => r.id)) + 1 : 100 + message.id * 10 // 生成不重复的回复ID

        message.replies.push({
            id: replyId,
            content: message.newReply.content,
            name: newMessage.name || '', // 复用主留言的昵称
            timestamp: Date.now(),
        })

        // 隐藏回复框并重置内容
        message.showReplyForm = false
        message.newReply.content = ''
        message.replyLoading = false
        ElMessage.success('回复成功')
    }, 500)
}

// 格式化时间显示
const formatTime = timestamp => {
    const now = Date.now()
    const diff = now - timestamp
    const minute = 60 * 1000
    const hour = 60 * minute
    const day = 24 * hour

    if (diff < minute) {
        return '刚刚'
    } else if (diff < hour) {
        return Math.floor(diff / minute) + '分钟前'
    } else if (diff < day) {
        return Math.floor(diff / hour) + '小时前'
    } else if (diff < 30 * day) {
        return Math.floor(diff / day) + '天前'
    } else {
        const date = new Date(timestamp)
        return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
    }
}
// 獲取數據列表
const getDataList = () => {
    const params = {
        id: 1,
        page: 1,
        limit: 10
    }
    CourseService.getMessageList(params).then(res => {
        console.log(res);
    }).finally(() => {
        
    })
}

onMounted(() => {
    getDataList()
})
</script>

<style lang="less" scoped>
.container {
    max-width: 800px;
    margin: 0 auto;
}
.header {
    text-align: center;
    margin-bottom: 30px;
}
.header h1 {
    color: #303133;
    font-size: 28px;
    margin-bottom: 10px;
}
.header p {
    color: #606266;
    font-size: 14px;
}
.message-card {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.reply-list {
    margin-top: 15px;
    padding-left: 40px;
    border-left: 2px solid #e4e7ed;
}
.reply-item {
    padding: 10px 0;
    border-bottom: 1px dashed #e4e7ed;
}
.reply-item:last-child {
    border-bottom: none;
}
.reply-form {
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.time-text {
    color: #909399;
    font-size: 12px;
    margin-left: 10px;
}
.reply-btn {
    font-size: 12px;
    padding: 3px 10px;
}
.message-item {
    padding: 15px 0;
    border-bottom: 1px solid #f0f2f5;
}
.message-item:last-child {
    border-bottom: none;
}
.flex{
    display: flex;
}
.items-center{
    align-items: center;
}
.reply-content{
    margin: 10px 0 0 28px; 
    font-size: 14px; 
    line-height: 1.5
}
</style>
